(function (window, undefined) {
  /* person:
    ----属性：<2X3炮身，1x1头部炮管>, 炮身颜色， 炮管颜色，发射子弹颜色, 运动方向, 角色类型
   */
  const abso = "absolute";
  function Tank(option) {
    let ops = option instanceof Object ? option : {};
    this.width = ops.width || 20;
    this.height = ops.height || 20;
    this.tankBodyColor = ops.bodyColor || "#333";
    this.tankHeadColor = ops.headColor || "blue";
    this.isBelong = ops.isBelong || "NPC";
    this.position = ops.position || {
      top: 4,
      left: 1,
    };
    this.abso = abso;
    this.direction = ops.direction || 90;
    //坦克各个组成块
    this.tank = [
      { color: "transparent" },
      { color: this.tankHeadColor },
      { color: "transparent" },
      { color: this.tankBodyColor },
      { color: this.tankBodyColor },
      { color: this.tankBodyColor },
      { color: this.tankBodyColor },
      { color: this.tankBodyColor },
      { color: this.tankBodyColor },
    ];
    // [
    //   { x: this.position.left, y: this.position.top, color: this.tankBodyColor },
    //   { x: this.position.left + 1, y: this.position.top, color: this.tankBodyColor },
    //   { x: this.position.left + 2, y: this.position.top, color: "tankHeadColor" },
    //   { x: this.position.left, y: this.position.top + 1, color: this.tankBodyColor },
    //   { x: this.position.left + 1, y: this.position.top + 1, color: this.tankBodyColor },
    //   { x: this.position.left + 2, y: this.position.top + 1, color: this.tankHeadColor },
    //   { x: this.position.left, y: this.position.top + 2, color: this.tankBodyColor },
    //   { x: this.position.left + 1, y: this.position.top + 2, color: this.tankBodyColor },
    //   { x: this.position.left + 2, y: this.position.top + 2, color: "transparent" },
    // ];
  }
  /* 
    BaseCamp:
    ----属性：<3X3大本营，1x1核心>, 阵营颜色， 阵营核心颜色，所属阵营，阵营位置
    */
  function BaseCamp(option) {
    let ops = option instanceof Object ? option : {};
    this.width = ops.width || 20;
    this.height = ops.height || 20;
    this.campBodyColor = ops.campColor || "#000";
    this.campCenterColor = ops.centerColor || "blue";
    this.isBelong = ops.isBelong || "NPC";
    this.abso = abso;
    this.life = 9;
    this.position = ops.position || {
      top: 0,
      left: 0,
    };
    //阵营各个组成块
    this.camp = [
      { color: this.campBodyColor },
      { color: this.campBodyColor },
      { color: this.campBodyColor },
      { color: this.campBodyColor },
      { color: this.campCenterColor },
      { color: this.campBodyColor },
      { color: this.campBodyColor },
      { color: this.campBodyColor },
      { color: this.campBodyColor },
    ];
    // [
    //   { x: this.position.left, y: this.position.top, color: this.campBodyColor },
    //   { x: this.position.left + 1, y: this.position.top, color: this.campBodyColor },
    //   { x: this.position.left + 2, y: this.position.top, color: this.campBodyColor },
    //   { x: this.position.left, y: this.position.top + 1, color: this.campBodyColor },
    //   { x: this.position.left + 1, y: this.position.top + 1, color: this.campCenterColor },
    //   { x: this.position.left + 2, y: this.position.top + 1, color: this.campBodyColor },
    //   { x: this.position.left, y: this.position.top + 2, color: this.campBodyColor },
    //   { x: this.position.left + 1, y: this.position.top + 2, color: this.campBodyColor },
    //   { x: this.position.left + 2, y: this.position.top + 2, color: this.campBodyColor },
    // ];
    this.campElements = [];
  }
  BaseCamp.prototype.render = function (map) {
    //利用文档碎片减少回流
    //创建文档碎片
    // let frag = document.createDocumentFragment();
    let campBox = document.createElement("div");
    campBox.style.width = this.width * 3 + "px";
    campBox.style.height = this.height * 3 + "px";
    campBox.style.display = "flex";
    campBox.style.position = this.abso;
    campBox.style[this.isBelong === "NPC" ? "left" : "right"] = this.position.left * this.width + "px";
    campBox.style[this.isBelong === "NPC" ? "top" : "bottom"] = this.position.top * this.height + "px";
    campBox.style.position = this.abso;
    campBox.style.flexWrap = "wrap";
    campBox.customBelong = this.isBelong;
    campBox.customRole = "camp";
    for (let i = 0; i < this.camp.length; i++) {
      let div = document.createElement("div");
      div.style.width = this.width + "px";
      div.style.height = this.height + "px";
      div.style.backgroundColor = this.camp[i].color;
      // div.style.position = this.abso;
      // div.style[this.isBelong === "NPC" ? "left" : "right"] = this.camp[i].x * this.width + "px";
      // div.style[this.isBelong === "NPC" ? "left" : "right"] = this.camp[i].y * this.height + "px";
      campBox.appendChild(div);
    }
    map.appendChild(campBox);
    this.campElements.push(campBox);
  };
  window.Tank = Tank;
  window.BaseCamp = BaseCamp;
})(window, undefined);
// (function (window, undefined) {

// })(window, undefined)
